<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" style="margin-bottom:16px">
      <a-form>
        <a-row :gutter="24">
          <!-- <a-col :md="6" :sm="24">
            <a-form-item v-bind="formItemLayout" label="日志类型">
              <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.logType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">添加记录</a-select-option>
                <a-select-option value="2">更新记录</a-select-option>
                <a-select-option value="3">删除记录</a-select-option>
                <a-select-option value="4">SQL语句</a-select-option>
                <a-select-option value="5">用户登录</a-select-option>
                <a-select-option value="6">用户退出</a-select-option>
                <a-select-option value="-1">用户退出</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="24">
            <a-form-item v-bind="formItemLayout" label="开始时间">
              <a-range-picker :ranges="{
                今天: [moment(), moment()],
                一周内: [moment(), moment().endOf('week')],
                一月内: [moment(), moment().endOf('month')],
                一年内: [moment(), moment().endOf('year')]
              }" style="width: 100%" format="YYYY/MM/DD" @change="onChangeDate" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-row>
        <a-col>
          <span :style="{ float: 'left', overflow: 'hidden' }">
            <a-button type="primary" style="margin-left: 8px;" @click="search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </div>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.ID" :columns="columns" :dataSource="data" :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :rowClassName="setRowClassName">
            <span slot="action" slot-scope="text, record">
              <template>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>修改</span>
                  </template>
                  <span size="small" type="link" @click="handleEdit(record)" style="cursor:pointer;color:#1890FF">修改</span>
                </a-tooltip>
                <a-divider type="vertical" />
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>查看</span>
                  </template>
                  <span size="small" type="link" @click="handleView(record)" style="cursor:pointer;color:#1890FF">查看字典</span>
                </a-tooltip>
                <!-- <a-popconfirm title="确定删除?" okText="确定" cancelText="取消" @confirm="handleDelete(record)">
                <a-button type="primary" shape="circle" icon="delete"></a-button>
                </a-popconfirm>-->
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
      <!-- <a-pagination size="small" showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" /> -->
    </a-card>
  </a-card>
</template>

<script>
import { getErrLogList } from '@/api/log'
import moment from 'moment'
import { tranDateDetail } from '@/utils/util'
export default {
  data() {
    return {
      action: 'add',
      tableCardLoad: false,
      spinning: false,
      data: [],
      queryParam: {
        logType: '0',
      },
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'top',
      },
      // 表头
      columns: [
        {
          title: '用户名',
          dataIndex: 'UserName',
          key: 'UserName',
          align: 'center',
        },
        {
          title: '操作内容',
          dataIndex: 'BusinessName',
          key: 'BusinessName',
          align: 'center',
        },
        {
          title: 'IP地址',
          dataIndex: 'OperationIp',
          key: 'OperationIp',
          align: 'center',
        },
      ],
      selectedRowKeys: [],
      selectedRowKeysItem: [],
      loading: false,
      loadingItemI: false,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 0 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
      },
      currentId: null,
      currentItemId: null,
    }
  },
  created() {
    var _this = this
    _this.spinning = true
    _this.initData(_this.queryParam)
  },
  methods: {
    moment,
    ok() {
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.loading = true
          setTimeout(() => {
            const value = {
              ...values,
              ID: this.currentId,
            }
            saveDictCategory(value).then((res) => {
              this.currentId = null
              this.initData(this.queryParam)
              this.loading = false
              this.visible = false
            })
          }, 1000)
        } else {
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    initData(data) {
      var _this = this
      _this.spinning = true
      getErrLogList(data)
        .then((res) => {
          if (res.success) {
            _this.data = res.data
            _this.data.map((a) => {
              a.OperationTime = tranDateDetail(a.OperationTime)
            })
            _this.pagination.total = res.page.RecordCount
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    search() {
      var _this = this
      _this.queryParam = Object.assign({}, _this.queryParam, { index: 1 })
      this.pagination.current = 1
      _this.initData(_this.queryParam)
    },

    onChangeDate(dates, dateStrings) {
      this.startDate = dateStrings[0]
      this.endDate = dateStrings[1]
      this.queryParam.startTime = dateStrings[0]
      this.queryParam.endTime = dateStrings[1]
      // console.log('From: ', dates[0], ', to: ', dates[1])
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
    },
    pageOnChange(index, pageSize) {
      this.tableCardLoad = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index,
      })
      Object.assign(this.queryParam, {
        pageSize,
        index,
      })
      this.initData(this.queryParam)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onSelectChangeItem(selectedRowKeys) {
      this.selectedRowKeysItem = selectedRowKeys
    },
    handleDownload(data) {
      this.spinning = true
      exportWord({ id: data.ID })
        .then((res) => {
          const a = returnXls(res)
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-row' : ''
    },
  },
}
</script>

<style lang="less" scoped>
.actionButton {
  margin-left: 10px;
}
</style>
